<template>
  <v-container>
    <h1>Product Management</h1>
    <v-data-table
      :headers="headers"
      :items="products"
      :items-per-page="5"
      class="elevation-1"
    >
      <template v-slot:top>
        <v-toolbar flat>
          <v-toolbar-title>Products</v-toolbar-title>
          <v-divider class="mx-4" inset vertical></v-divider>
          <v-spacer></v-spacer>
          <v-btn color="primary" dark class="mb-2" @click="openDialog">
            Add New Product
          </v-btn>
        </v-toolbar>
      </template>
      <template v-slot:item.actions="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">
          mdi-pencil
        </v-icon>
        <v-icon small @click="deleteItem(item)">
          mdi-delete
        </v-icon>
      </template>
    </v-data-table>

    <!-- Add/Edit Dialog -->
    <v-dialog v-model="dialog" max-width="500px">
      <!-- Dialog content -->
    </v-dialog>
  </v-container>
</template>

<script>
export default {
  name: 'Products',
  data: () => ({
    dialog: false,
    headers: [
      { title: 'ID', key: 'id' },
      { title: 'Name', key: 'name' },
      { title: 'Price', key: 'price' },
      { title: 'Actions', key: 'actions', sortable: false },
    ],
    products: [],
    editedItem: {
      id: '',
      name: '',
      price: 0,
    },
    defaultItem: {
      id: '',
      name: '',
      price: 0,
    },
  }),
  methods: {
    openDialog() {
      // Open dialog logic
    },
    editItem(item) {
      // Edit item logic
    },
    deleteItem(item) {
      // Delete item logic
    },
  },
}
</script>